<template>
  <div class="contentBox">
    <div class="content">
      <div ref="topContent">
        <div class="topBox" ref="topBox">
          <div class="topLeft">用户管理</div>
          <div class="topRight">
            <t-button class="hoverBlue" theme="primary" @click="handleAddEdit(true, {})" v-permission="['sys:user:save']">
              <template #icon>
                <svg-icon
                    :name="'icon-add'"
                    class-name="add-svg-icon"
                ></svg-icon>
              </template>
              新增
            </t-button>
          </div>
        </div>
        <div class="line"></div>

        <div class="tableTreeBox">
          <div class="left_tree">
              <div class="colorBox">
                <t-space>
                  <t-input-adornment prepend="filter:">
                    <t-input
                        v-model="stateTree.filterText"
                        placeholder="请输入部门名称"
                        style="width: 222px"
                        @change="handleFilter"
                    />
                  </t-input-adornment>
                </t-space>
                <div class="scrollBox">
                  <t-tree
                      :loading="treeLoading"
                      :activable="true"
                      ref="tree"
                      :data="stateTree.treeData"
                      allow-fold-node-on-filter
                      :filter="stateTree.filterData"
                      :keys="stateTree.keys"
                      expandAll
                      hover
                      activable
                      :onClick="treeClick"
                  />
                </div>
              </div>
          </div>
          <div class="right_table">
            <div class="formBox">
              <t-form
                  ref="form"
                  :data="formData"
                  :layout="'inline'"
                  scroll-to-first-error="smooth"
              >
                <t-form-item label="用户名称" name="username" :label-width="58">
                  <t-input v-model="formData.username" placeholder="请输入用户名称"></t-input>
                </t-form-item>

                <t-form-item label="状态" name="status" :label-width="34">
                  <t-select v-model="formData.status" placeholder="请选择状态">
                    <t-option key="0" label="禁用" value="0" />
                    <t-option key="1" label="正常" value="1" />
                  </t-select>
                </t-form-item>

                <t-form-item label="账号类型" name="type" :label-width="58">
                  <t-select v-model="formData.type" placeholder="请选择账号类型">
                    <t-option key="0" label="管理员" value="0" />
                    <t-option key="1" label="用户" value="1" />
                  </t-select>
                </t-form-item>

                <t-form-item class="formHandleBox">
                  <t-space size="small" style="gap: 10px;">
                    <t-button class="queryBtn hoverBlue" @click="handleQuery(1)">查询</t-button>
                    <t-button class="resetBtn hoverLightBlue" @click="handleReset">重置</t-button>
                  </t-space>
                </t-form-item>
              </t-form>
            </div>
            <div class="tableBox">
              <div style="position: relative">
                <t-table
                    :loading="isLoading"
                    :height="tableHeight"
                    ref="tableRef"
                    row-key="id"
                    :data="tableState.tableData"
                    :columns="tableState.columns"
                    :selected-row-keys="selectedRowKeys"
                    @select-change="handleSelectChange"
                >
                  <template #handle="{ row }">
                    <t-button theme="primary" class="rowEdit" @click="handleAddEdit(false, row)" v-permission="['sys:user:update']">
                      <template #icon>
                        <svg-icon
                            :name="'icon-rowEdit'"
                            class-name="row-svg-icon"
                        ></svg-icon>
                      </template>
                      修改
                    </t-button>

                    <t-button theme="primary" class="rowDel" @click="handleDel(row)" v-permission="['sys:user:delete']">
                      <template #icon>
                        <svg-icon
                            :name="'icon-rowDel'"
                            class-name="row-svg-icon"
                        ></svg-icon>
                      </template>
                      删除
                    </t-button>
                  </template>
                </t-table>
                <div class="emptyBox" v-if="tableState.tableData.length === 0">
                  <svg-icon
                      :name="'icon-emptyTable'"
                      class-name="emptyTable-svg-icon"
                  ></svg-icon>
                  <span>暂无数据</span>
                </div>
              </div>
            </div>
            <div class="footerBox">
              <t-pagination
                  v-model="current"
                  v-model:pageSize="pageSize"
                  :pageSizeOptions="[10, 20, 30, 50]"
                  :total="totalNum"
                  size="small"
                  show-jumper
                  @page-size-change="onPageSizeChange"
                  @current-change="onCurrentChange"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
<!--    新增、修改 弹窗-->
    <t-dialog
        v-if="saveVisible"
        v-model:visible="saveVisible"
        class="ruleDialog"
        width="600"
        :header="dialogTitle"
        :onClose="onClose"
        :closeOnOverlayClick="false"
    >
      <t-form
          ref="ruleForm"
          :data="ruleData"
          :label-align="'right'"
          :rules="AHEAD_RULES"
          :labelWidth="78"
          @submit="ruleSubmit">
        <t-form-item label="机构名称" name="agencyId" v-show="itemShow">
          <t-cascader
              :disabled="formData.agencyId !== ''"
              :options="casOptions"
              v-model="ruleData.agencyId"
              :keys="{
                value: 'agencyId',
                label: 'agencyName',
                children: 'children'
              }"  />
        </t-form-item>
        <t-form-item label="用户名称" name="username">
          <t-input v-model="ruleData.username" placeholder="用户名称（支持数字、字母大小写、下划线）"></t-input>
        </t-form-item>
        <t-form-item label="用户密码" name="password" v-if="itemShow">
          <t-input v-model="ruleData.password" placeholder="请输入用户密码" type="password"></t-input>
        </t-form-item>
        <t-form-item label="状态" name="status">
          <t-radio-group v-model="ruleData.status">
            <t-radio value="0">禁用</t-radio>
            <t-radio value="1">正常</t-radio>
          </t-radio-group>
        </t-form-item>
        <t-form-item label="角色" name="roleIdList">
          <t-select
              v-model="ruleData.roleIdList"
              :options="selectOptions"
              :min-collapsed-num="3"
              multiple
              clearable
              :keys="{
                value: 'id',
                label: 'roleName'
              }"
              placeholder="请选择角色">
          </t-select>
        </t-form-item>
        <t-form-item label="新密码" name="newPassword" v-show="!itemShow" help="* 如果需要修改密码可以在这里设置新的密码，否则不需要填写内容 *">
          <t-input v-model="ruleData.newPassword" placeholder="设置新密码" type="password"></t-input>
        </t-form-item>
        <t-form-item class="handleRuleBox">
          <t-space size="small">
            <t-button theme="default" variant="base" type="reset" @click="handleRuleCancel">取消</t-button>
            <t-button class="hoverBlue" theme="primary" type="submit">保存</t-button>
          </t-space>
        </t-form-item>
      </t-form>
    </t-dialog>
    <!--    删除弹窗-->
    <t-dialog
        v-model:visible="delVisible"
        class="dialogDel"
        theme="info"
        width="431"
        header="您确认删除该用户吗？"
        :on-confirm="onClickConfirm"
    />
  </div>
</template>

<script lang="jsx" setup>
// form 表单
import {getCurrentInstance, nextTick, onMounted, onUnmounted, reactive, ref} from "vue";
import {MessagePlugin} from "tdesign-vue-next";
import {debounce} from "../../utils/tools";
import {
  userList,
  agencySelectList,
  addUser,
  delUser,
  roleSelect,
  userDetail,
  editUser
} from '@/api/permissionSet/userManagement.js'
import cache from '@/utils/cache.js'
import { encrypt } from "@/utils/jsencrypt"
const pageInstance = getCurrentInstance()

const formData = reactive({
  agencyId: '',
  username: '',
  status: '',
  type: '',
});

// tree
const stateTree = reactive({
  treeData: [],
  filterText: '',
  filterData: null,
  keys: {
    value: 'agencyId',
    label: 'agencyName',
    children: 'children'
  }
})
const handleFilter = () => {
  stateTree.filterData = stateTree.filterText ? (node) => node.data['agencyName'].indexOf(stateTree.filterText) >= 0 : null;
}
const tree = ref()
const treeClick = (data) => {
  nextTick(() => {
    let { node } = data
    if(node.actived) { // 选中
      formData.agencyId = node.data.agencyId
      handleQuery()
    } else { // 取消选中
      formData.agencyId = ''
      handleQuery()
    }
  })
}

// table
const delVisible = ref(false)
const delRow = ref()
const handleDel = (row) => { // 删除
  delVisible.value = true
  delRow.value = row
}
const onClickConfirm = () => {
  let data = [ delRow.value.id ]
  delUser(data).then(res => {
    if(res.code === 0) {
      delVisible.value = false
      MessagePlugin.success('删除成功！');
      if(tableState.tableData.length - 1 === 0) {
        current.value = current.value > 1 ? current.value - 1 : current.value
      }
      handleQuery()
    }
  }).catch(error => {
    console.log(error)
  })
}
const tableState = reactive({
  tableData: [],
  columns: [
    {
      colKey: 'row-select',
      type: 'multiple',
      width: 55,
    },
    { colKey: 'agencyId', title: '机构ID', ellipsis: true },
    { colKey: 'username', title: '用户名称', ellipsis: true },
    { colKey: 'userRole', title: '用户角色', ellipsis: true, cell:(h, {row}) => {
        let names = []
        row['userRole'].forEach(item => {
          names.push(item.roleName)
        })
        return names.join(',')
      } },
    { colKey: 'type', title: '账号类型', ellipsis: true, cell:(h, {row}) => {
      return row.type === 0 ? '管理员' : '用户'
      } },
    { colKey: 'status', title: '状态  ', align: 'center', cell:(h, {row}) => {
        return row.status === 1
            ? <t-tag theme='success' variant="light-outline">
              正常
            </t-tag>
            : <t-tag theme='warning' variant="light-outline">
              禁用
            </t-tag>
      } },
    { colKey: 'changedBy', title: '修改人', ellipsis: true },
    { colKey: 'createdAt', title: '创建时间', ellipsis: true },
    { colKey: 'createdBy', title: '创建人', ellipsis: true },
    { colKey: 'handle', title: '操作', align: 'center', width: 180 },
  ],
})
const selectedRowKeys = ref([])
const handleSelectChange = (value, ctx) => {
  selectedRowKeys.value = value;
};
// table 高度变化
const tableHeight = ref(0)
const getTableHeight = () => {
  nextTick(() => {
    if(pageInstance.refs.topBox) {
      const otherHeight = pageInstance.refs.topBox.offsetHeight
      const windowHeight = window.innerHeight
      tableHeight.value = windowHeight - otherHeight - 282
    }
  })
}
// 分页
const current = ref(1);
const pageSize = ref(10);
const totalNum = ref(0)
const onPageSizeChange = (size) => {
  pageSize.value = size
  handleQuery()
};
const onCurrentChange = (index, pageInfo) => {
  current.value = index
  handleQuery()
};
// 获取table数据
const isLoading = ref(false);
const handleQuery = (num) => {
  isLoading.value = true
  let params = {
    pageNo: num === 1 ? 1 : current.value,
    pageSize: pageSize.value,
    ...formData
  }
  userList(params).then(res => {
    if(res.code === 0) {
      tableState.tableData = res.data.list
      current.value = res.data['currPage']
      pageSize.value = res.data['pageSize']
      totalNum.value = res.data['totalCount']
    }
    isLoading.value = false
  }).catch(error => {
    isLoading.value = false
  })
}
// 重置
const handleReset = () => {
  formData.username = ''
  formData.status = ''
  formData.type = ''
}
// window窗口 变化
const getWindowInfo = () => {
  const info = {
    width: window.innerWidth,
    height: window.innerHeight
  }
  getTableHeight()
}
const resizeInfo = debounce(getWindowInfo, 0)

// 获取tree数据
const treeLoading = ref(false)
const casOptions = ref([]) // cascader 数据
const getAgencyList = () => {
  treeLoading.value = true
  agencySelectList().then(res => {
    if(res.code === 0) {
      stateTree.treeData = res.data
      casOptions.value = res.data
    }
    treeLoading.value = false
  }).catch(error => {
    treeLoading.value = false
  })
}
onMounted(() => {
  getTableHeight()
  window.addEventListener('resize', resizeInfo);
  handleQuery()
  getAgencyList()
})
onUnmounted(() => {
  window.removeEventListener('resize', resizeInfo);
})
// 新增、修改 dialog
const saveVisible = ref(false)
const dialogTitle = ref('')
const itemShow = ref()
const selectOptions = ref([])
const handleAddEdit = (flag, row) => {
  itemShow.value = flag
  dialogTitle.value = flag ? '新增用户' : '修改用户'
  // 判断左侧机构树有没有选中
  if(formData.agencyId) {
    ruleData.agencyId = formData.agencyId
  } else {
    ruleData.agencyId = ''
  }
  saveVisible.value = true

  // 获取角色数据
  roleSelect().then(res => {
    selectOptions.value = res.data
  })

  // 编辑 请求详情接口
  if(!flag) {
    userDetail(row.id).then(res => {
      ruleData.agencyId = res.data.agencyId
      ruleData.id = res.data.id
      ruleData.roleIdList = res.data.roleIdList
      ruleData.status = res.data.status.toString()
      ruleData.username = res.data.username
      ruleData.type = res.data.type
    })
  }
}
const AHEAD_RULES = {
  agencyId: [ { required: true, message: '请选择机构名称' ,type: 'error', trigger: 'change'}],
  username: [
      { required: true, message: '请输入用户名称' ,type: 'error', trigger: 'blur'},
      { validator: (val) => val.length >= 4, message: '请输入数字英文下划线，4位及以上' },
      { pattern: /^[5A-Za-z0-9-\_]/, message: '请输入数字英文下划线，4位及以上' }
  ],
  password: [ { required: true, message: '请输入用户密码' ,type: 'error', trigger: 'blur'}],
}
const ruleData = reactive({
    agencyId: '',
    username: '',
    password: '',
    status: '1',
    roleIdList: [],
    newPassword: ''
});
// 添加用户
const ruleForm = ref()
const ruleSubmit = ({ validateResult, firstError }) => {
  if (validateResult === true) {
    if(itemShow.value) { // 添加用户
      ruleData.id = null
      ruleData.type = null
      ruleData.password = encrypt(ruleData.password)
      addUser(ruleData).then(res => {
        if (res.code === 0) {
          MessagePlugin.success('新增成功！');
          ruleForm.value.reset()
          saveVisible.value = false
          handleQuery()
        }
      })
    } else { // 修改用户
      if(ruleData.newPassword) {
        let word = JSON.parse(JSON.stringify(ruleData.newPassword))
        ruleData.password = encrypt(word)
        delete ruleData.newPassword
      } else {
        delete ruleData.newPassword
        delete  ruleData.password
      }

      editUser(ruleData).then(res => {
        MessagePlugin.success('修改成功！');
        ruleForm.value.reset()
        saveVisible.value = false
        handleQuery()
      }).catch(error => {
        console.log(error)
      })
    }
  } else {
    console.log('Validate Errors: ', firstError, validateResult);
    MessagePlugin.warning(firstError);
  }
};
const onClose = () => {
  ruleForm.value.reset()
  ruleData.status = '1'
}
const handleRuleCancel = () => {
  ruleForm.value.reset()
  saveVisible.value = false
  ruleData.status = '1'
}
</script>

<style lang="scss" scoped>
.contentBox {
  position: relative;
  background-color: #EBECED!important;
  padding: 8px;
  height: 100%;
  .content {
    height: 100%;
    border-radius: 4px;
    .topBox {
      height: 65px;
      display: flex;
      padding: 20px 20px 17px 20px;
      background-color: rgba(255, 255,255, 1);
      border-radius: 4px;
      .topLeft {
        font-size: 16px;
        font-weight: 600;
        color: rgba(51, 51, 51, 1);
      }
      .topRight {
        margin-left: auto;
        :deep(.t-button) {
          width: 77px;
          height: 28px;
          opacity: 1;
          border-radius: 3px;
          background: rgba(30, 117, 254, 1);
          //border: 0.5px solid rgba(9.38399999999999, 95.71679999999998, 234.6, 1);
          padding: 0;
          font-size: 12px;
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
        }
        .add-svg-icon {
          height: 16px;
          width: 16px;
          cursor: pointer;
          display: inline-block;
          vertical-align: middle;
          margin-right: 5px;
        }
      }
    }
    .tableTreeBox {
      background-color: white;
      border-radius: 4px;
      display: flex;
      overflow: hidden;
      padding: 0 20px;
      height: calc(100vh - 178px);
      margin-top: 8px;
      .left_tree {
        width: 252px;
        background-color: #EBECED!important;
        padding-right: 8px;
        .colorBox {
          background-color: white;
          padding-top: 18px;
          border-radius: 4px;
          height: 100%;
        }
        :deep(.t-input-adornment) {
          .t-input-adornment__text {
            display: none;
          }
        }
        .scrollBox {
          margin-top: 10px;
          overflow-y: auto;
          height: calc(100% - 48px);
        }
        :deep(.t-tree) {

        }
        :deep(.t-tree__empty) {
          text-align: center;
        }
      }
      .right_table {
        flex: 1;
        background-color: #EBECED!important;
        //border-radius: 4px;
        .formBox {
          padding: 0 0 0 20px;
          border-radius: 4px 4px 0 0;
          background-color: rgba(255, 255,255, 1);
          :deep(.t-form) {
            padding: 20px 0 20px 0;
            border-radius: 4px 0 0 0;
            .t-form-inline {
              row-gap: 16px !important;
            }
            .t-form__item {
              width: 25%;
              height: 28px;
              margin-right: 0!important;
              padding-right: 10px;
              .t-range-input {
                height: 28px;
              }
              .t-input {
                height: 28px;
              }
              .t-form__label--right {
                text-align: left;
                padding-right: 0;
                font-size: 12px;
                font-weight: 400;
                color: rgba(0, 0, 0, 0.9);
              }
              .t-select__wrap {
                .t-input {
                  height: 28px;
                }
              }
            }
            .t-form__item:nth-child(4) {
              padding-right: 0;
            }
            .t-form__item:nth-child(5) {
              .t-form__label--right {display: none}
              .t-form__controls {
                margin-left: 0 !important;
              }
              .t-space {
                width: 100%;
                .timeCheck {
                  font-size: 12px;
                  font-weight: 400;
                  color: rgba(30, 117, 254, 1);
                }
              }
              .t-space-item:nth-child(1) {
                width: 126px;
              }
              .t-space-item:nth-child(2) {
                flex: 1;
              }
              .t-space-item:nth-child(3) {
                flex: 1;
              }
              .t-date-picker {
                height: 28px;
                width: 100%;
                .t-input {
                  height: 28px;
                }
              }
              .timeType {
                float: left;
                width: 126px;
                text-align: left;
                height: 28px;
                line-height: 28px;
                span {
                  margin-right: 10px;
                  font-size: 12px;
                  font-weight: 400;
                  color: rgba(0, 0, 0, 0.9);
                }
                span:nth-child(4) {
                  margin-right: 0;
                }
              }
            }
            .formHandleBox {
              margin-left: auto;
              text-align: right;
              padding-right: 0;
              .t-space {
                margin-left: auto;
                justify-content: center;
                align-items: center;
                .queryBtn {
                  border: none;
                  width: 56px;
                  height: 30px;
                  opacity: 1;
                  border-radius: 3px;
                  background: rgba(30, 117, 254, 1);
                  font-size: 12px;
                  font-weight: 400;
                  color: rgba(255, 255, 255, 1);
                  text-align: center;
                }
                .resetBtn {
                  width: 56px;
                  height: 30px;
                  opacity: 1;
                  border-radius: 3px;
                  background: rgba(227, 238, 255, 1);
                  border: 0.5px solid rgba(9.38399999999999, 95.71679999999998, 234.6, 1);
                  font-size: 12px;
                  font-weight: 400;
                  color: rgba(30, 117, 254, 1);
                  text-align: center;
                }
                .arrowCont {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  span {
                    font-size: 12px;
                    font-weight: 500;
                    color: rgba(138, 138, 138, 1);
                  }
                  .arrowTD-svg-icon {
                    height: 16px;
                    width: 16px;
                    cursor: pointer;
                  }
                }
              }
              .t-form__controls {
                margin-left: 0 !important;
              }
            }
          }
          .upArrow {
            text-align: right;
            height: 20px;
            .arrowTD-svg-icon {
              height: 16px;
              width: 16px;
              cursor: pointer;
            }
          }
        }
        .tableBox {
          border-radius: 0 0 0 4px;
          background-color: rgba(255,255,255,1);
          height: calc(100% - 68px);
          padding-left: 20px;
          :deep(.t-table__header) {
            tr {
              th {
                padding: 7px 10px;
                box-sizing: border-box;
              }
              th:nth-child(1) {
                padding: 7px 20px 7px 10px;
              }
              th:nth-child(2) {
                padding-left: 0;
              }
            }
          }
          :deep(.t-table__body) {
            tr {
              td {
                padding: 6px 10px;
                box-sizing: border-box;
              }
              td:nth-child(1) {
                padding: 7px 20px 7px 10px;
              }
              td:nth-child(2) {
                padding-left: 0;
              }
            }
            .t-button {
              border: none;
              width: 56px;
              height: 26px;
              opacity: 1;
              border-radius: 3px;
              font-size: 13px;
              font-weight: 400;
              padding: 0;
              margin: 0 4px;
              .row-svg-icon {
                height: 12px;
                width: 12px;
                margin-right: 2px;
              }
            }
            .rowDel {
              background: rgba(255, 224, 224, 1);
              color: rgba(227, 77, 89, 1);
            }
            .rowConfig {
              background: rgba(255, 238, 224, 1);
              color: rgba(255, 153, 0, 1);
            }
            .rowEdit {
              background: rgba(227, 238, 255, 1);
              color: rgba(30, 117, 254, 1);
            }

            .t-tag {
              margin: 0 auto;
              width: 62px;
              height: 24px;
              opacity: 1;
              border-radius: 4px;
              display: flex;
              justify-content: center;
              align-items: center;
              padding: 5px 12px 5px 12px;
              font-size: 12px;
              font-weight: 400;
            }
            .t-tag--warning {
              background: rgba(255, 246, 230, 1);
              border: 1px solid rgba(255, 153, 0, 1);
              color: rgba(255, 153, 0, 1);
            }
            .t-tag--success {
              background: rgba(233, 246, 242, 1);
              border: 1px solid rgba(0, 184, 122, 1);
              color: rgba(0, 184, 122, 1);
            }
          }
          :deep(.t-table__content) {
            border-radius: 4px;
            .t-table--layout-fixed {
              border-left: 1px solid rgba(245, 245, 245, 1);
              border-right: 1px solid rgba(245, 245, 245, 1);
            }
          }
        }
        :deep(.t-table__empty) {
          display: none;
        }
        .emptyBox {
          position: absolute;
          height: 116px;
          width: 69px;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          text-align: center;
          .emptyTable-svg-icon {
            height: 62px;
            width: 69px;
          }
          span {
            font-size: 12px;
            font-weight: 400;
            color: rgba(92, 91, 91, 1);
          }
        }
        .footerBox {
          background-color: rgba(255,255,255,1);
          width: calc(100% - 290px);
          position: absolute;
          bottom: 8px;
          overflow: hidden;
          border-radius: 0 0 4px 4px;
        }
      }
    }
  }
}
:deep(.ruleDialog .t-dialog__wrap .t-dialog__position .t-dialog) {
  padding: 22px 22px 0 22px;
  border-radius: 6px;
  .t-dialog__footer {
    display: none !important;
  }
  .t-dialog__body {
    padding-bottom: 0;
    .t-form__item {
      margin-bottom: 16px;
    }
    .t-input {
      height: 28px;
    }
  }
  .t-input__help {
    color: red;
    font-size: 12px;
  }
  .t-form__label {
    padding-right: 10px !important;
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.9);
  }
  .t-radio__label {
    font-size: 12px;
    font-weight: 400;
    color: rgba(92, 91, 91, 1);
  }
}
.handleRuleBox {
  padding-top: 15px;
  :deep(.t-form__label) {
    font-size: 14px;
    font-weight: 400;
    color: rgba(227, 60, 100, 0.9);

  }
  :deep(.t-form__controls) {
    text-align: right;
  }
  :deep(.t-form__controls-content) {
    display: inline-block;
    position: absolute;
    right: 0;
  }
  .t-button--theme-default {
    background-color: white;
    border: none;
    width: 60px;
    height: 28px;
  }
  .t-button--theme-primary {
    width: 60px;
    height: 28px;
    opacity: 1;
    border-radius: 3px;
    background: rgba(30, 117, 254, 1);
  }
}
:deep(.dialogDel .t-dialog__wrap .t-dialog__position .t-dialog) {
  padding: 22px 22px 18px 22px;
  .t-icon.t-is-info {
    color: rgba(30, 117, 254, 1) ;
  }
  .t-dialog__body__icon {
    display: none;
  }
  .t-dialog__footer {
    padding-top: 31px;
    .t-dialog__cancel {
      background-color: white;
      border: none;
      width: 60px;
      height: 28px;
    }
    .t-dialog__confirm {
      width: 60px;
      height: 28px;
      opacity: 1;
      border-radius: 3px;
      background: rgba(30, 117, 254, 1);
    }
    .t-dialog__confirm:hover {
      background: var(--Brand-Brand6-Hover, #458DFF) !important;
      color: var(--text-icon-font-wh-190-anti, rgba(255, 255, 255, 0.90)) !important;
    }
  }
}
</style>
